<template>
  <div>
    <el-form v-if="isHidden">
      <el-form-item label="关于我们：" prop="articleContent">
        <br />
        <div>
          <mavon-editor
            :ishljs="true"
            ref="md"
            @imgAdd="imgAdd"
            @imgDel="imgDel"
            style="height: 100vh"
            v-model="form.aboutOurContent"
            @change="change"
          ></mavon-editor>
        </div>
      </el-form-item>
      <el-form-item style="text-align: right">
        <el-button type="primary" @click="confirm">确 定</el-button>
      </el-form-item>
    </el-form>
    <el-form v-else>
      <el-form-item>
        <mavon-editor
          v-model="form.aboutOurContent"
          :subfield="prop.subfield"
          :defaultOpen="prop.defaultOpen"
          :toolbarsFlag="prop.toolbarsFlag"
          :editable="prop.editable"
          :scrollStyle="prop.scrollStyle"
          :boxShadow="prop.boxShadow"
          ref="md"
        />
      </el-form-item>
      <el-form-item style="text-align: right">
        <el-button type="primary" @click="edit" style="text-align: right"
          >编辑</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { deletePicture, addPicture } from "../api/article";
import common from "../utils/common";

import { getAboutOur,addAboutOur } from "../api/web";

export default {
  data() {
    return {
      localhostPath: common.localhostPath,
      form: {
        aboutOurContent: "", // 输入的markdown
      },
      picForm: {
        picPath: "",
      },
      img_file: [],
      isHidden: false,
    };
  },
  mounted() {
    getAboutOur().then(({ data }) => {
      if (data.data.length == 0) {
        this.form = {};
      } else {
        this.form = data.data;
      }
    });
  },
  methods: {
    edit() {
      this.isHidden = true;
      console.log(this.form.id);
      if (this.form.id == undefined) {
        localStorage.setItem("aboutId", 0);
      } else {
        localStorage.setItem("aboutId", this.form.id);
      }
    },
    confirm() {
      console.log(this.form);
      var id = localStorage.getItem("aboutId");

      addAboutOur(id, this.form).then(({ data }) => {
        this.form = data.data;
        localStorage.removeItem("aboutId");
      });

      this.isHidden = false;
    },
    change(value) {
      //实时获取转成html的数据
      this.form.aboutOurContent = value;
    },
    imgDel(pos) {
      delete this.img_file[pos];
      let str = pos[0];
      this.picForm.picPath =
        "/" + str.split("/")[3] + "/" + str.split("/")[4];
      deletePicture(this.picForm).then((data) => {
        console.log(data);
      });
    },
    // 将图片上传到服务器，返回地址替换到md中
    // 绑定@imgAdd event
    imgAdd(pos, $file) {
      // 第一步.将图片上传到服务器.
      var formdata = new FormData();
      formdata.append("images", $file);
      addPicture(formdata).then((data) => {
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        // $vm.$img2Url 详情见本页末尾
        var url = this.localhostPath + data.data.data;
        this.$refs.md.$img2Url(pos, url);
      });
    },
  },
  computed: {
    prop() {
      let data = {
        subfield: false, // 单双栏模式
        defaultOpen: "preview", //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false,
        toolbarsFlag: false,
        scrollStyle: false,
        boxShadow: false, //边框
      };
      return data;
    },
  },
};
</script>

<style>
</style>